<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
      <a href="#/product">产品</a>
  </body>
  <script>
      //window.onpopstate 监听路径的切换
    window.onpopstate = function (event) {
      alert(
        "location: " +
          document.location +
          ", state: " +
          JSON.stringify(event.state)
      );
    };
    //绑定事件处理函数.
    history.pushState({ page: 1 }, "title 1", "?page=1"); //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
    history.pushState({ page: 2 }, "title 2", "?page=2"); //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
    history.replaceState({ page: 3 }, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
    //  history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
    //  history.back(); // 弹出 "location: http://example.com/example.html, state: null
    history.go(2); // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}
  </script>
</html>
